<template>
	<view class='seize'>
		<view class='list' v-if="list.length">
			<view class='order' v-for="(item,index) in list" :key='index'>
				<view class='general dFlex jBetween_aCenter'>
					<view class='infoLeft dFlex jStart_aCenter'>
						<view class='kind sty1' v-if="item.order_type == '1'">免拆清洗</view>
						<view class='kind sty2' v-if="item.order_type == '2'">拆下清洗</view>
						<view class='flour'>{{item.address}}</view>
						<!-- <view class='time'>{{item.order_time}}</view> -->
					</view>
					<view class='status'>派单中</view>
				</view>
				<view class="info">
					<view class="user dFlex jBetween_aCenter">
						<view class="userInfo">
							<text>{{item.trueName}}</text>
							<text class="phone">尾号{{item.tel.substr(-4)}}</text>
						</view>
						<view class="callIcon imgPublic" @tap='call(item.tel)'>
							<image src="https://wx.gdxixiashi.com/public/images/worker/dianhua@2x.png" mode="widthFix"></image>
						</view>
					</view> 
					<view class="line dFlex jStart_aStart">
						<view>上门地址：</view>
						<text>{{item.area+item.address}}</text>
					</view>
					<view class="line dFlex jStart_aStart">
						<view>上门时间：</view>
						<text>{{item.order_time}}</text>
					</view>
					<view class="line dFlex jStart_aStart">
						<view>下单时间：</view>
						<text>{{item.pay_time}}</text>
					</view>
					<view class="line dFlex jStart_aStart">
						<view>清洗方式：</view>
						<text>{{item.order_type == '1'?'免拆清洗':"拆装清洗"}}</text>
					</view>
					<view class="line dFlex jStart_aStart">
						<view>产品规格：</view>
						<!-- <text>{{item.spec}}</text> -->
						<view class='shops'>
							<view class="shopOne dFlex jStart_aStart" v-for="(item2,index2) in item.products" :key='index2'>
								<view class="shopImg imgPublic">
									<image :src="item2.list_img"></image>
								</view>
								<view class="shopInfo">
									<view class="shopname">{{item2.product_name}}</view>
									<view class='spec'>{{item2.specs_name}} x{{item2.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="orderLine dFlex jBetween_aCenter">
					<text>订单金额</text>
					<view class="lineVal sty1">￥<text>{{item.product_total}}</text></view>
				</view>
				<view class="orderLine dFlex jBetween_aCenter">
					<text>本单预计收入</text>
					<view class="lineVal">￥{{item.give_amount}}</view>
				</view>
				<view class="btns dFlex jEnd_aCenter" @tap='qd(item.orderId)'>
					<view class="btn">立即抢单</view>
				</view>
			</view>
		</view>
		<view class="list empty imgPublic" v-else>
			<image src="../static/images/empty.png" mode="widthFix"></image>
		</view>
		<view class="seat"></view>
		<!-- 抢单提示弹窗 -->
		<view class="zz dFlex jCenter_aCenter" v-if="successFlag">
			<view class="getOrder dFlex flexDirection jCenter_aCenter">
				<view class="cgIcon imgPublic">
					<image src="https://wx.gdxixiashi.com/public/images/worker/chenggong@2x.png" mode="widthFix"></image>
				</view>
				<view class="toast">恭喜！抢单成功</view>
				<view class="close" @tap.stop='successFlag = false'>我知道了</view>
			</view>
		</view>
		<tabbar actIdx='1' ref='tabbar' identity='2' :qCount='qCount'></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				successFlag:false,
				list:[],
				page:1,
				load:false,
				qCount:0,
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 1;
			this.initList();
			if(uni.getStorageSync('storeId')){
				this.initStaff();
			}
		},
		"$store.state.count": {
			//深度监听，可监听到对象、数组的变化
			handler(val,oldVal) {
				this.qCount = val;
			},
			deep: true, //true 深度监听
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page++;
				this.initList();
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			initList(){
				this.tool.getData('Order/orderList',{
					page:this.page,
					storeId:uni.getStorageSync('storeId'),
				}).then(res=>{
					console.log(res);
					if(res){
						res.list.map((item,index)=>{
							item.spec = '';
							item.products.map((item2,index2)=>{
								item.spec = index2 == item.products.length-1?item.spec+item2.specs_name:item.spec+item2.specs_name+'、';
							})
						})
						this.list = this.page == 1?res.list:this.list.concat(res.list);
						this.load = res.list.length>=10?true:false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			initStaff(){
				this.tool.getStaffInfo().then(res=>{
					console.log(res);
					if(res){
						this.qCount = res.jiedan;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 拨打电话
			call(tel){
				uni.makePhoneCall({
					phoneNumber:tel,
				})
			},
			// 抢单
			qd(orderId){
				this.tool.getData('Order/orderChange',{
					orderId:orderId,
					type:1,
					storeId:uni.getStorageSync('storeId'),
				}).then(res=>{
					console.log(res);
					if(res){
						this.successFlag = true;
						this.page = 1;
						this.initList();
						this.initStaff();
					}
				}).catch(err=>{
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.seize{
		width: 100%;
		padding:12px 4%;
		box-sizing:border-box;
		.zz{
			.getOrder{
				width: 76%;
				background: white;
				border-radius: 12px;
				padding: 40px 0 22px;
				.cgIcon{
					width: 40px;
					height: 40px;
				}
				.toast{
					font-size: 18px;
					margin: 24px 0;
					font-weight: bold;
				}
				.close{
					width: 68%;
					text-align: center;
					color: white;
					background: linear-gradient(0deg,#2d67d2 0%, #609ff8 100%);
					padding: 6px 0;
					font-size: 16px;
					border-radius: 50px;
					font-weight: bold;
				}
			}
		}
		.list{
			width: 100%;
			.order{
				width: 100%;
				padding:12px 16px 12px 0;
				box-sizing:border-box;
				background:white;
				margin-bottom:12px;
				.btns{
					width: 100%;
					.btn{
						width: max-content;
						color: white;
						padding: 6px 12px;
						border-radius: 50px;
						background: linear-gradient(0deg,#2d67d2 0%, #609ff8 100%);
					}
				}
				.orderLine{
					width: 100%;
					margin-bottom: 10px;
					color: #222222;
					padding: 0 0 0 16px;
					box-sizing: border-box;
					.lineVal{
						font-size: 16px;
					}
					.sty1{
						font-size: 12px;
						color: #FF3B2F;
						text{
							font-size: 18px;
						}
					}
				}
				.orderLine:last-child{
					margin: 0;
				}
				.info{
					width: 100%;				
					padding: 30px 0 30px 16px;
					box-sizing: border-box;
					.line{
						font-size: 12px;
						color: #999999;
						margin-top: 10px;
						// view{
						// 	width: 20%;
						// }
						.shops{
							flex:1;
							.shopOne{
								width:100%;
								margin-bottom: 12px;
								.shopInfo{
									flex:1;
									.shopname{
										color:#333333;
										margin-bottom:6px;
										font-size:14px;
									}
								}
								.shopImg{
									width: 40px;
									height: 40px;
									border-radius: 5px;
									overflow: hidden;
									margin-right: 12px;
									image{
										width:100%;
										height:100%;
									}
								}
							}
							.shopOne:last-child{
								margin: 0;
							}
						}
						text{
							flex: 1;
							font-size: 15px;
							color: #000033;
						}
					}
					.user{
						font-weight: bold;
						.phone{
							margin-left: 6px;
						}
						.userInfo{
							flex: 1;
						}
						.callIcon{
							width: 16px;
						}
					}
				}
				.general{
					width: 100%;
					.infoLeft{
						flex: 1;
						.kind{
							color: white;
							width: max-content;
							border-radius: 0 50px 50px 0;
							background: linear-gradient(to right,#2D67D2,#609FF8);
							padding: 4px 10px;
							font-size: 11px;
						}
						.sty1{
							background: linear-gradient(to right,#2D67D2,#609FF8);
						}
						.sty2{
							background: linear-gradient(-45deg,#ffa132 0%, #ff5400 100%);
						}
						.flour{
							flex: 1;
							font-size: 18px;
							margin: 0 10px;
							font-weight: bold;
						}
					}
					.status{
						width:max-content;
						font-size: 12px; 
						color:#F8711F;
						background:#fef1e9;
						padding:5px;
						border-radius:5px;
					}
				}
			}
		}
	}
</style>
